<template>
      <div id="header" class="nav">
        <ul class="nav_ul">
          <li style="margin-right:20px" ><img src="../assets/img/logo.png" style="box-shadow:none" alt=""></li>
          <li :class="{action:$route.name!='mymusic'}"><router-link to="/discover" >发现音乐</router-link></li>
          <li :class="{action:$route.name=='mymusic'}"><router-link to="/mymusic" >我的音乐</router-link></li>
          <li style="padding:0 23px ;">
            <el-input placeholder="请输入歌曲名"
            index="3"
            prefix-icon="el-icon-search"
            class="dialog-input-text"
            v-model="query"
            @keyup.enter.native="seach" style="line-height: 70px;"></el-input>
          </li>
        </ul>
      </div>
</template>
<script>
import axios from "axios"
import { mapState } from 'vuex'
export default {
  name:'Header',
  data() {
    return {
      query: "",
    };
  },
  computed:{
        ...mapState(['songs'])
  },
  methods: {
    seach() {
      
      axios
        .get(
          "https://autumnfish.cn/search?keywords=" + this.query
        )
        .then(input => {
          console.log(this.query)
          // console.log(input.data.result.songs);

           this.$store.state.songs=input.data.result.songs
           //跳转路由
           this.$router.push('/seachPage')
           console.log("跳")
        })
        .catch(err => {
          console.log(err);
        });
    },
  }
};
</script>
<style>
  /* 导航栏样式 */
  @media screen and (max-width: 650px){
    /* 响应导航栏 */
    .nav li img{
      display: none;
    }
    .nav .nav_ul{
      padding: 0 0px;
    }
  }
   .nav{
    overflow:hidden;
    margin: 0;
    height: 70px;
    background-color: #242424;
    width: 100%;
  }
  .nav_ul{
    overflow: hidden;
    /* width: 1100px; */
    margin: 0px auto;
    padding: 0 20%;
  }
  .nav li{
    list-style: none;
    float: left;
  }
  .nav li img{
    height: 70px;
  }
  /* 路由a标签 */
  .nav a:-webkit-any-link{
    display: inline-block;
    color: #ccc;
    line-height: 70px;
    padding:0 23px ;
    height: 100%;
    text-decoration: none;
  }
  .nav a:hover{
    color:white;
    background: #000;
  }
  .nav .action{
    color:white;
    background: #000;
  }
  /* 搜索框圆角样式 */
 .dialog-input-text input.el-input__inner {
   border-radius: 15px;
  }
  
</style>